<template>
    <div class="context-menu" v-if="visible && isShowUl" v-click-outside="close" :style="{left: posX + 'px', top: posY + 'px'}">
        <ul class="dropdown-menu">
            <template v-if="position == 'left'">
                <li>
                    <a @click="handlerMenu('del')">删除</a>
                </li>
            </template>
            <template v-if="position == 'message'">
                <li v-if="msg.contentType != 1011 && msg.contentType != 1016 && msg.contentType != 1013">
                    <a @click="handlerMenu('replay')">转发</a>
                </li>
                <li v-if="copyVisible">
                    <a @click="handlerMenu('copy')">复制</a>
                </li>

                <li v-if="msg.contentType == 1022">
                    <a @click="downLoad()">下载</a>
                </li>

                <li v-if="answerVisible">
                    <a @click="handlerMenu('answer')">回复</a>
                </li>

                <li v-if="reCallVisible && !reCallDisable">
                    <a @click="handlerMenu('recall')">撤回</a>
                </li>
            </template>
        </ul>
    </div>
</template>
<script>
    import config from '../../config'

    export default {
    data() {
        return {
            posX: 0,
            posY: 0
        }
    },
    props: {
        msg: {
            type: Object,
            default: null
        },
        visible: {
            type: Boolean,
            default: false
        },
        position: {
            type: String,
            default: 'left'
        },
        clickPosition: {
            type: Object
        },
        reCallDisable: {
            type: Boolean,
            default: false
        },
        reCallVisible: {
            type: Boolean,
            default: true
        },
        copyVisible: {
            type: Boolean,
            default: true
        },
        answerVisible: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        isShowUl() {
            if (this.position == 'left') {
                return true
            } else if (this.position == 'message') {
                if ((this.msg.contentType != 1011 && this.msg.contentType != 1016 && this.msg.contentType != 1013) || this.copyVisible || this.msg.contentType == 1022 || this.answerVisible || (this.reCallVisible && !this.reCallDisable)) {
                    return true
                }
            }
            return false
        }
    },
    methods: {
        downLoad() {
            let url = JSON.parse(this.msg.msg).url
            window.open(url)
            // window.location.href = `${config.baseRestUrl}/download?url=${url}`
            this.visible = false
        },
        close() {
            this.$emit('close')
        },
        handlerMenu(direct) {
            if (direct != 'recall') {
                this.$emit('confirm', direct)
            } else {
                if (!this.reCallDisable) {
                    this.$emit('confirm', direct)
                }
            }
        }
    },
    watch: {
        clickPosition(val) {
            if (val) {
                this.posX = val.clientX
                this.posY = val.clientY
            }
        }
    }
}
</script>
<style lang="less" scoped>
.context-menu{
    position: fixed;
    z-index: 99;
    .dropdown-menu {
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #d6d6d6;
        box-shadow: 2px 3px 10px rgba(0,0,0,.1);
        min-width: 125px;
        li {
            cursor: pointer;
            a {
                display: block;
                text-decoration: none;
                color: #000;
                font-size: 14px;
                padding: 8px;
                border-bottom: 1px solid #f1f1f1;
                text-align: left;
                &:hover {
                    background-color: #f5f5f5
                }
                &.disable {
                    color: #b2b2b2;
                }
            }
            &:last-child {
                a {
                    border-bottom: 0
                }
            }
        }
    }
}
</style>
